<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
            <!-- <i class="iconfont icon-home" @click="$router.replace('/')"></i> -->
          </div>
          <p>选择地址</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="same">
        <div class="address-list">
          <div class="addressa" v-for="item in list" :key="item.addressId">
            <div class="addre" @click="selectAddress(item)">
              <div class="til">
                <p>
                  {{ item.name }}<span>{{ item.telephone }}</span>
                  <van-tag type="danger">{{
                    item.isDefault === true ? "默认" : ""
                  }}</van-tag>
                </p>
              </div>
              <div class="detailedAddres">{{ item.detailedAddress }}</div>
            </div>
            <div class="edit">
              <router-link :to="'/City/' + item.addressId"
                ><i class="el-icon-edit"></i
              ></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { AddressList } from "@/api/address";
export default {
  components: {},
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.AddressList();
  },
  methods: {
    selectAddress(item) {
      // console.log(item);
      this.$router.push({
        path: "/Orders",
        query: {
          name: item.name,
          tel: item.telephone,
          address: item.region+item.detailedAddress,
        },
      });
    },
    AddressList() {
      let userId = this.$store.state.user.id;

      AddressList(userId).then((res) => {
        // console.log(res, "address");
        this.list = res.data.data;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 8vh;
  z-index: 5;
  top: 0;
  background: transparent;

  position: sticky;
  background: rgb(255, 255, 255);

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.main {
  width: 100%;
  height: 80vh;
  background: #eee;
  overflow: hidden;
  .address-list {
    width: 100%;
    height: auto;
    .addressa {
      width: 95vw;
      height: 10vh;
      background: #fff;
      margin: 0 auto;
      border-radius: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #333;
      .addre {
        width: 100%;
        margin-left: 5vw;
        .til {
          font-size: 16px;
          color: #333;
          p {
            span {
              margin-left: 2vw;
            }
          }
        }
      }
      .edit {
        margin-right: 3vw;
        a {
          color: #333;
        }
      }
      .detailedAddres {
        font-size: 12px;
        color: #333;
      }
    }
  }
}
</style>
